<%-- 
    Document   : scoreboardTest
    Created on : Jun 17, 2011, 1:17:05 PM
    Author     : castrosalazar
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ScoreboardTest</title>
        <style type="text/css">
    *, html, div, body
    {
            margin: 0;
            padding: 0;
    }
    #sidebar
    {
            background-color:#dedede;
            width:25%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
    }
    #scorecardContainer
    {
            background-color:#fff;
            width:75%;
            height:100%;
            position:fixed;
            overflow:auto;
            border-left:#333 2px solid;
            right:0;
    }
    .scorecard
    {
            width:150px;
            height:175px;
            position:absolute;
            border:2px #333 solid;
            border-radius:10px;
            text-align:center;
            line-height:175px;
    }
    .line
    {
            background-color:#333;
            position:absolute;
            display:block;
            width:4px;
            height:4px;
    }
    </style>
        
        
    </head>
    <body>
        <div id="sidebar">
            <p style="text-align:center; font-size:24px; line-height:250px;">
            Unimplemented
            </p>
        </div>
        <div id="scorecardContainer">
          <c:set var="scores" value="${requestScope.scores}" />
          <c:set var="points" value="${requestScope.points}" />
          <c:if test="${fn:length(points) > 0}">
            <c:set var="primerPunto" value="${points[0]}" />
            <c:set var="ultimoPunto" value="${points[fn:length(points)-1]}" />
            <c:set var="puntoMedio" value="${(ultimoPunto[0]-primerPunto[0])/2+primerPunto[0]}" />

            <c:forEach items="${scores}" var="score" varStatus="status">
              <div class="scorecard" style="top:${score.y}px; left:${score.x}px" />
                  <span>Dam diram</span>
              </div>
            </c:forEach>
            <c:forEach items="${points}" var="point" varStatus="status">
              <span class="line" style="height:10px; left:${point[0]-2}px; top:${point[1]}px;"></span>
            </c:forEach>

            <span class="line" style="height: 8px; left: ${puntoMedio-2}px; top: ${primerPunto[1]-8}px;"></span>
            <span class="line" style="width: ${ultimoPunto[0]+4-primerPunto[0]}px; top: ${primerPunto[1]-2}px; left: ${primerPunto[0]-2}px;"></span>
          </c:if>
        </div>
    </body>
</html>
